<template>
  <div class="app">
    <van-nav-bar
      title="个人简介"
      left-text=""
      right-text="保存"
      left-arrow
      class="colnav"
      @click-left="backlink"
      @click-right="saveinfo"
    />
    <van-field
      v-model="description"
      rows="2"
      autosize
      label="个人简介"
      type="textarea"
      maxlength="50"
      placeholder="请输入个人简介"
      show-word-limit
      class="description"
    />
  </div>
</template>

<script>
import { showToast } from "vant";
import { useStore } from "@/store/index.js";
import { usereditdescribe } from "@/http/request.js";
export default {
  data() {
    return {
      userid: "",
      description: "",
    };
  },
  methods: {
    inituserinfo() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      this.description = userinfo.description;
      this.userid = userinfo.id;
    },
    backlink() {
      this.$router.back();
    },
    saveinfo() {
      const formdata = {
        id: this.userid,
        describe: this.description,
      };
      usereditdescribe(formdata).then((res) => {
        if (res.code == 0) {
          const store = useStore();
          const userinfo = store.getUserStoreinfo;
          userinfo.description = this.description;
          showToast(res.msg);
        } else {
          showToast(res.msg);
        }
      });
    },
  },
  mounted() {
    this.inituserinfo();
  },
};
</script>

<style scoped>
.app {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f3f5;
}
.description :deep(.van-cell__value){
  white-space: normal; 
  overflow-wrap: break-word; 
  word-break: break-all !important; 
}
</style>